<template>
    <div class="searchTwo">
      <div class="searchTop">
        <div class="back" @click="backse">
          <span></span>
        </div>
        <input type="text" placeholder="手机">
        <img class="search" src="./icons/xupai.png" alt="">
      </div>
      <ul class="synth">
        <li v-for="(item, key) in synthesize" :key = key>{{item}}</li>
      </ul>
      <div class="worp">
       <div class="section">
         <div class="phonelist" v-for="(ite, key) in phonelist" :key="key">
           <img v-lazy="ite.img" alt="">
           <div>
             <!--手机标题-->
             <p class="phone_title">
               {{ite.title}}
             </p>
             <!--价格-->
             <div class="price">
               <span>￥{{ite.actual}}</span> <del>单个价格￥{{ite.price}}</del>
             </div>
             <!--邮费-->
             <div class="postage">
               <span>包邮</span>
             </div>
             <!--拼的人数-->
             <p class="person_spell">2人拼·30天{{ite.integer}}件</p>
           </div>
         </div>
       </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "searchTwo",
      data(){
          return{
            synthesize:['综合','销量','价格','筛选'],
            phonelist:[]
          }
      },
      methods:{
        backse(){
          this.$router.push({path:'./searchLenovo'});
        },
        getuser(){
          this.$http.get('/phone')
            .then((res) => {
              this.phonelist = res.data.phonelist;
            })
            .catch((err) => {
              console.log(err);
            })
        }
      },
      created() {
        this.getuser()
      }
    }
</script>

<style scoped lang="scss">
.searchTwo{
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  .searchTop{
    padding: 35px 50px;
    height: 150px;
    display: flex;
    .back{
      line-height: 150px;
      width: 85px;
      text-align: left;
      span{
        display: inline-block;
        width: 50px;
        height: 50px;
        border: solid 1px #666;
        border-bottom: none;
        border-left: none;
        transform: rotate(225deg);
      }
    }
    input{
      flex: 1;
      height: 120px;
      border-radius: 70px;
      background: url("./icons/query.png") no-repeat 35px center #f2f2f2;
      background-size: 50px 50px;
      border: none;
      font-size: 40px;
      text-indent: 120px;
      outline: none;
    }
    .search{
      width: 70px;
      height: 70px;
      margin:25px 0 20px 20px;
    }
  }
  .synth{
    margin: 0;
    padding: 0;
    list-style: none;
    height: 145px;
    width: 100%;
    line-height: 145px;
    display: flex;
    border-bottom: solid 2px #e6e6e6;
    li{
      flex: 1;
      text-align: center;
    }
  }
  .worp{
    position: absolute;
    top:370px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    .section{
      .phonelist{
        height: 485px;
        box-sizing: border-box;
        padding: 45px 70px;
        display: flex;
        img{
          width: 315px;
          height: 390px;
          margin-right: 75px;
          border-radius: 80px;
        }
        p{
          margin: 0;
          padding: 0;
          font-size: 40px;
          color: #333;
        }
        .phone_title{
          line-height: 64px;
        }
        .price{
          margin-top: 50px;
          span{
            color: #ec685b;
            font-size: 40px;
          }
          del{
            color: #d3d3d3;
            font-size: 30px;
          }
        }
        .postage{
          height: 53px;
          margin: 30px 0;
          span{
            display: inline-block;
            width: 105px;
            height: 53px;
            line-height: 53px;
            color: white;
            background-color: #ec675b;
            border-radius: 30px;
            font-size: 32px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
